<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<pre>
    事件修饰符
    .stop : 阻止事件冒泡
    .prevent ： 阻止事件默认行为
    .capture ： 使用事件捕获模式
    .self ： 只当事件在该元素本身
    .once ： 事件只会触发一次
</pre>
<div id="app">
    <div @click="bubble">
        <button>未阻止事件冒泡</button>
        <button @click.stop>单纯阻止事件冒泡</button>
        <button @click.stop="noBubble">调用事件处理器并阻止事件冒泡</button>
    </div>

    <div @click.capture="show" style="padding:10px;border:10px solid #ccc;">
        <button @click="capture">捕获上层单击事件</button>
    </div>

    <a href="/404" @click.prevent>阻止默认行为</a>

    <div @click="show" style="padding:10px;border:10px solid #ccc;">
        <a href="/404" @click.prevent.stop>阻止默认行为+事件冒泡</a>
    </div>

    <div @click.self="show" style="padding:10px;border:10px solid #ccc;">
        <button>self</button>
    </div>

    <button @click.once="show">once</button>

    <div @click="show" style="padding:10px;border:10px solid #ccc;">
        <button @click.self.stop>.self.stop</button>
    </div>
</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            name:'Greet'
        },
        methods:{
            bubble: function (event) {
                console.log('事件已经冒泡到DIV');
            },
            noBubble: function () {
               console.log('已经阻止事件冒泡');
            },
            show: function () {
                console.log('已经捕获子元素的单击事件');
            },
            capture: function () {
                console.log('已经捕获上层单击事件');
            }
        }
    });

</script>
</html>